<template>
	<div id="specialCardAccount" class="same-change-oldstyle">
		<div class="same-head-box">
			<div class="saem-seat-box">
				<div class="saem-seat-left">
					<span>当前位置：</span>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item :to="{ path: '/specialCardAccount' }">设置</el-breadcrumb-item>
						<el-breadcrumb-item>特殊水卡账户</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="saem-seat-right">
					<button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
					<!-- <button class="same-search-btns" @click="returnBack">返回</button> -->
				</div>
			</div>
		</div>
		<div class="specialCardAccountwrap">
			<h4 class="four">授权额度状态
				<span>总额度：{{totilMoney|filterNumber}}元</span>
				<el-divider direction="vertical"></el-divider>
				<span style="margin-left: 0;">已用额度：{{useMoney|filterNumber}}元</span>
			</h4>
			<p>特殊水卡账户余额 :<span>{{surplusMoney|filterNumber}}</span>元</p>
			<!-- <h4 class="four">消费记录</h4> -->
			<el-divider content-position="left"><i class="el-icon-wallet"></i> 消费记录</el-divider>
			<div class="table_box ">

				<div class="common-table-outer">
					<el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
						:data="tableData" stripe>
						  <el-table-column header-align="center" width="70" align="center" label="序号">
							<template slot-scope="scope">
								{{scope.$index+1+(page-1)*pageSize}}
							</template>
						</el-table-column>
						<el-table-column align="center" prop="create_time" label="消费时间">
						</el-table-column>

						<el-table-column align="center" prop="money_type" label="消费类型">
						</el-table-column>

						<el-table-column align="center" prop="id" label="金额">
							<template slot-scope="scope">
								<span v-bind:class="scope.row.money>0 ? 'colorGreen':'colorRed'">{{scope.row.money|filterNumber}}</span>
							</template>
						</el-table-column>

						<el-table-column align="center" prop="note" label="充值卡号">
						</el-table-column>
						<template slot="empty" v-if="isLoad">
							<div class="new-no-data-show">
								<img src="../../assets/images/no-data.png" alt="">
								<div>暂无相关数据</div>
							</div>
						</template>
					</el-table>

					<div class="same-page-inShow" v-if="tableData.length>0 && isLoad">
						<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="page" :page-sizes="sizes" :page-size="pageSize"
							layout="total,prev, pager, next, jumper, sizes" :total="total">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'specialCardAccount',
		data: function () {
			return {
				totilMoney: 0,//授信总额度
				credit_balance: 0,//授信余额
				surplusMoney: 0,//账户余额
				tableData: [],
				page: 1,
				pageSize: 15,
				sizes: [15, 30, 40, 50],
				total: 0,
				currentPage: 1,
				isLoad: false,
				loading: false, //加载动画
			}
		},
		created: function () {
			this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏 
			this.getPartnerQuota();
			this.tableList();
		},
		inject: ["reload"],
		methods: {
			RefreshFun() {
				// 调用reload方法，刷新整个页面
				this.reload();
			},
			//返回
			returnBack() {
				this.$router.back(-1);
			},
			//页数条数
			handleSizeChange(val) {
				this.page = 1;
				this.pageSize = val
				this.tableList();
			},
			//跳转页数
			handleCurrentChange(val) {
				this.page = val;
				this.tableList();
			},
			//数据列表查询
			tableList: function () {
				var that = this;
				that.isLoad = false;
				that.loading = true; //开启动画
				this.$post({
					url: 'Partner/Achievement/capitalRecordList',
					data: {
						page: that.page,
						row: that.pageSize,
						note: '特殊水卡'
					},
					success: (data) => {
						this.loading = false; //关闭动画
						if (data.code == 1000) {
							this.tableData = data.data.data;    // 清空数据
							that.total = Number(data.data.page.total_number);    // 总的数据
						} else {
							this.tableData = [];
						}
						that.isLoad = true;
						that.loading = false; //关闭动画
					}
				})
			},
			//获取获取合伙人的额度
			getPartnerQuota: function () {
				this.$post({
					url: 'Partner/WaterCard/getPartnerQuota',
					data: {

					},
					success: (data) => {
						if (data.code == 1000) {
							this.totilMoney = data.data.credit_total;
							this.credit_balance = data.data.credit_balance;
							this.surplusMoney = data.data.special_recharge_balance;
						}
					}
				})
			}
		},
		computed: {
			useMoney: function () {
				return this.totilMoney - this.credit_balance;
			}
		},
		watch: {

		}
	}
</script>

<style>
	#specialCardAccount .specialCardAccountwrap {
		padding: 0 40px 30px  40px;
		width: 70%;
	}

	#specialCardAccount .specialCardAccountwrap .four {
		font-size: 16px;
		color: #323333;
	}

	#specialCardAccount .specialCardAccountwrap .four span {
		margin-left: 30px;
		color: #7f7e7e;
		font-size: 16px;
	}

	#specialCardAccount .specialCardAccountwrap p {
		color: #303131;
	}

	#specialCardAccount .specialCardAccountwrap p span {
		font-size: 22px;
		color: #b82025;
		font-weight: bold;
		padding: 0 5px;
	}

	#specialCardAccount th,
	td {
		text-align: center !important;
	}

	#specialCardAccount td .el-input__inner {
		border: none;
		background-color: #f5f5f5;
		text-align: center;
		font-size: 16px;
		width: 160px;
		margin-left: 30px;
	}

	#specialCardAccount .el-table--border th {
		background-color: #e6e6e5 !important;
		border-color: #cccccc;
		padding: 10px 0;
		height: 60px;
	}

	#specialCardAccount .el-table td {
		border-right: none;
		border-color: #cccccc;
	}

	.colorGreen {
		color: #277f3a;
	}

	.colorRed {
		color: #ba1d22;
	}

	#specialCardAccount .btn {
		border: 1px solid #2c5586;
		padding: 2px 5px;
		color: #2883be;
		cursor: pointer;
	}

	#specialCardAccount .el-pagination {
		margin-top: 30px;
		float: right;
	}
</style>